<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="author" content="xmy6364">
    <meta name="description" content="想要成为大佬">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

    <link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.5.0/styles/github-gist.min.css">
    <link rel="stylesheet" href="/assets/lib/css/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/css/layout.css" />
    <script defer src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
    <script defer src="/assets/js/copyCode.js"></script>
    <script defer src="/assets/js/backTop.js"></script>
    <script defer src="/assets/js/tool.js"></script>

    
  <link rel="stylesheet" href="/assets/css/page.css" />
  <link rel="stylesheet" href="/assets/css/sidebar.css" />
  <link rel="stylesheet" href="/assets/css/footer.css" />
  <link rel="stylesheet" href="/assets/css/post.css" />
  <script defer src="/assets/js/backHome.js"></script>
  <script defer src="/assets/js/toc.js"></script>
  <script defer src="/assets/js/copyright.js"></script>


    <title>使用Github Actions将Vue项目部署到Github Pages</title>
  </head>
  <body>
    <div class="container">
      <aside>
        
  <div class="sidebar">
  <header>梦的博客</header>
  <div class="info">
    <div class="avatar">
      <img src="https://cdn.jsdelivr.net/gh/xmy6364/blog-image/img/pixelartoc_1.png" alt="头像">
    </div>
    <div class="author">xmy6364</div>
    <div class="description">想要成为大佬</div>
    <div class="about">
      <a href="/about">about me.</a>
    </div>
  </div>
  <div class="links">
    <ul>
    
      <li class="links-item">
        <a href="https://github.com/xmy6364" target="_blank">
          <i class="fa fa-github-alt" aria-hidden="true"></i>
        </a>
      </li>
    
      <li class="links-item">
        <a href="tencent://message/?uin=1176281967" target="_blank">
          <i class="fa fa-qq" aria-hidden="true"></i>
        </a>
      </li>
    
    </ul>
  </div>
  <nav>
    <ul>
    
      <li class="nav-item">
        <a href="/archives">
          <span class="nav-item__count">33</span>
          <span class="nav-item__label">归档</span>
        </a>
      </li>
    
      <li class="nav-item">
        <a href="/categories">
          <span class="nav-item__count">2</span>
          <span class="nav-item__label">分类</span>
        </a>
      </li>
    
      <li class="nav-item">
        <a href="/tags">
          <span class="nav-item__count">45</span>
          <span class="nav-item__label">标签</span>
        </a>
      </li>
    
    </ul>
  </nav>
  <div class="catalogue" id="catalogue"></div>
</div>

      </aside>
      <main>
        
  <div class="post">
    <div class="post-front">
      <h1 class="post-front__title">使用Github Actions将Vue项目部署到Github Pages</h1>
      <div class="post-front__desc">
        
        <p class="post-front__desc-date">
          <i class="fa fa-calendar" aria-hidden="true"></i>
          2020/11/16 21:44:13
        </p>
        
        
        <p class="post-front__desc-category">
          <i class="fa fa-folder-o" aria-hidden="true"></i>
          <a href="/categories/工具">
            工具
          </a>
        </p>
        
          <div class="post-front__desc-tags">
          
          <a href="/tags/Github Actions">
            <i class="fa fa-tag" aria-hidden="true"></i>
            Github Actions
          </a>
          
          <a href="/tags/Github Pages">
            <i class="fa fa-tag" aria-hidden="true"></i>
            Github Pages
          </a>
          
          <a href="/tags/Github">
            <i class="fa fa-tag" aria-hidden="true"></i>
            Github
          </a>
          
        </div>
      </div>
    </div>
    <div class="post-content">
      <nav id="toc" class="toc"><ol><li><a href="#github-actions是什么">Github Actions是什么？</a></li><li><a href="#基本概念">基本概念</a></li><li><a href="#创建一个vue项目">创建一个Vue项目</a></li><li><a href="#编写workflow文件">编写workflow文件</a></li><li><a href="#获取密钥并存储到github仓库中">获取密钥并存储到Github仓库中</a><ol><li><a href="#创建密钥">创建密钥</a></li><li><a href="#将密钥存储到github仓库">将密钥存储到Github仓库</a></li><li><a href="#推送仓库">推送仓库</a></li></ol></li><li><a href="#一个小问题">一个小问题</a></li><li><a href="#参考文章">参考文章</a></li></ol></nav><p>GitHub Actions 是 GitHub 的持续集成服务，是一个非常强大的功能，用它可以实现很多自动化功能。现在我们来使用Github Actions将我们做好的Vue项目部署到Github Pages上。</p>
<p>本项目源码：<a href="https://github.com/xmy6364/github-actions-demo">xmy6364/github-actions-demo</a></p>
<h2 id="github-actions是什么">Github Actions是什么？</h2>
<p>持续集成通常由很多操作组成，比如运行单元测试、登录远程服务器、打包代码等等，Github将这些操作称为actions。
这些actions在不同项目中也是类似甚至是完全相同的，是完全可以共享的。而Github就根据这个特点创建了一个actions市场，可以发布自己的actions和使用其他人的写好的actions。</p>
<h2 id="基本概念">基本概念</h2>
<ul>
<li>workflow：持续集成一次运行的过程，即一个工作流程</li>
<li>job：任务，一个工作流程由一个或多个任务组成</li>
<li>step：步骤，每个任务由多个步骤组成，逐步完成</li>
<li>action：动作，每个步骤可以执行一个或多个动作</li>
</ul>
<h2 id="创建一个vue项目">创建一个Vue项目</h2>
<p>使用Vue CLI创建一个Vue项目</p>
<pre class="hljs"><code><button class="copy-btn" type="button" data-clipboard-action="copy" data-clipboard-target="#copy1622196948151">复制</button>vue create github-actions-demo
<span class="hljs-built_in">cd</span> github-actions-demo
<b class="name">bash</b></code><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy1622196948151">vue create github-actions-demo
cd github-actions-demo
</textarea>
<p>在项目根目录下创建一个<code>vue.config.js</code>，修改<code>publicPath</code>为将要发布的Github Pages的子路径，比如发布后的地址<code>https://xmy6364.github.io/github-actions-demo/</code>，那么<code>publicPath</code>就要设置为<code>/github-actions-demo/</code></p>
<pre class="hljs"><code><button class="copy-btn" type="button" data-clipboard-action="copy" data-clipboard-target="#copy1622198050733">复制</button><span class="hljs-built_in">module</span>.exports = {
  <span class="hljs-attr">publicPath</span>: <span class="hljs-string">&#x27;/github-actions-demo/&#x27;</span>,
};
<b class="name">js</b></code><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy1622198050733">module.exports = {
  publicPath: '/github-actions-demo/',
};
</textarea>
<h2 id="编写workflow文件">编写workflow文件</h2>
<p>workflow文件采用YAML格式，后缀为<code>.yml</code>，在项目根目录下创建<code>.github/workflows/</code>目录，Github只要发现该目录中由yml文件就会自动运行该文件。
创建<code>ci.yml</code></p>
<pre class="hljs"><code><button class="copy-btn" type="button" data-clipboard-action="copy" data-clipboard-target="#copy1622202920087">复制</button><span class="hljs-comment"># 该workflow的名称，可以随意填写</span>
<span class="hljs-attr">name:</span> <span class="hljs-string">Build</span> <span class="hljs-string">And</span> <span class="hljs-string">Deploy</span> <span class="hljs-string">To</span> <span class="hljs-string">Github</span> <span class="hljs-string">Pages</span>

<span class="hljs-comment"># workflow的触发事件，这里代表main分支的push事件触发</span>
<span class="hljs-attr">on:</span>
  <span class="hljs-attr">push:</span>
    <span class="hljs-attr">branches:</span> [ <span class="hljs-string">main</span> ]

<span class="hljs-comment"># 任务</span>
<span class="hljs-attr">jobs:</span>
  <span class="hljs-comment"># build-and-deploy 为任务的ID</span>
  <span class="hljs-attr">build-and-deploy:</span>
    <span class="hljs-comment"># 运行所需要的环境</span>
    <span class="hljs-attr">runs-on:</span> <span class="hljs-string">ubuntu-latest</span> 

    <span class="hljs-attr">steps:</span>
      <span class="hljs-comment"># 步骤名</span>
      <span class="hljs-bullet">-</span> <span class="hljs-attr">name:</span> <span class="hljs-string">Checkout</span>
        <span class="hljs-comment"># 使用的actions脚本，这里是官方提供的获取源码脚本</span>
        <span class="hljs-attr">uses:</span> <span class="hljs-string">actions/checkout@v2.3.1</span>
        <span class="hljs-comment"># 这个为使用 JamesIves/github-pages-deploy-action脚本所需要的配置</span>
        <span class="hljs-attr">with:</span>
          <span class="hljs-attr">persist-credentials:</span> <span class="hljs-literal">false</span>

      <span class="hljs-comment"># 执行npm脚本打包项目</span>
      <span class="hljs-bullet">-</span> <span class="hljs-attr">name:</span> <span class="hljs-string">Install</span> <span class="hljs-string">and</span> <span class="hljs-string">Build</span>
        <span class="hljs-attr">run:</span> <span class="hljs-string">|
          npm install
          npm run build
</span>      
      <span class="hljs-comment"># 执行JamesIves/github-pages-deploy-action将项目发布到Github Pages</span>
      <span class="hljs-bullet">-</span> <span class="hljs-attr">name:</span> <span class="hljs-string">Deploy</span>
        <span class="hljs-attr">uses:</span> <span class="hljs-string">JamesIves/github-pages-deploy-action@3.7.1</span>
        <span class="hljs-attr">with:</span>
          <span class="hljs-comment"># 该workflow需要操作repo，因此需要一个密钥，下面会讲到如何获取这个密钥</span>
          <span class="hljs-attr">ACCESS_TOKEN:</span> <span class="hljs-string">${{</span> <span class="hljs-string">secrets.ACCESS_TOKEN</span> <span class="hljs-string">}}</span>
          <span class="hljs-comment"># 发布到的分支</span>
          <span class="hljs-attr">BRANCH:</span> <span class="hljs-string">gh-pages</span>
          <span class="hljs-comment"># 要发布的文件夹</span>
          <span class="hljs-attr">FOLDER:</span> <span class="hljs-string">dist</span>
<b class="name">yml</b></code><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy1622202920087"># 该workflow的名称，可以随意填写
name: Build And Deploy To Github Pages

# workflow的触发事件，这里代表main分支的push事件触发
on:
  push:
    branches: [ main ]

# 任务
jobs:
  # build-and-deploy 为任务的ID
  build-and-deploy:
    # 运行所需要的环境
    runs-on: ubuntu-latest 

    steps:
      # 步骤名
      - name: Checkout
        # 使用的actions脚本，这里是官方提供的获取源码脚本
        uses: actions/checkout@v2.3.1
        # 这个为使用 JamesIves/github-pages-deploy-action脚本所需要的配置
        with:
          persist-credentials: false

      # 执行npm脚本打包项目
      - name: Install and Build
        run: |
          npm install
          npm run build
      
      # 执行JamesIves/github-pages-deploy-action将项目发布到Github Pages
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@3.7.1
        with:
          # 该workflow需要操作repo，因此需要一个密钥，下面会讲到如何获取这个密钥
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          # 发布到的分支
          BRANCH: gh-pages
          # 要发布的文件夹
          FOLDER: dist
</textarea>
<h2 id="获取密钥并存储到github仓库中">获取密钥并存储到Github仓库中</h2>
<h3 id="创建密钥">创建密钥</h3>
<p>进入Github的Settings中<a href="https://github.com/settings/">https://github.com/settings/</a>，依次点击<code> Developer settings</code>、<code>Personal access tokens</code>。然后点击<code>Generate new token</code>创建。因为要操作仓库，所以需要勾选<code>repo</code>权限。</p>
<p>具体请参考：<a href="https://docs.github.com/cn/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token">创建个人访问令牌</a></p>
<p><strong>请及时保存生成的密钥</strong></p>
<h3 id="将密钥存储到github仓库">将密钥存储到Github仓库</h3>
<p>首先创建一个Github仓库，然后到仓库的<code>Settings/Secret</code>下，点击<code>New repository secret</code>将刚才保存的密钥保存，并命名为<code>ACCESS_TOKEN</code>（注意，如果这里的命名更改了，前面的yml文件中的<code>${{ secrets.ACCESS_TOKEN }}</code>也要更改）</p>
<h3 id="推送仓库">推送仓库</h3>
<p>根据Github上的提示，将准备好的本地仓库推送之后就会自动执行workflow。</p>
<p>我们可以到Actions中实时查看运行日志。</p>
<h2 id="一个小问题">一个小问题</h2>
<p>workflow执行成功后我们仍然有可能访问对应网址(<code>https://xmy6364.github.io/github-actions-demo</code>)时显示404。</p>
<p>这时候我们需要到Github仓库中的<code>Settings/Options</code>下，找到<code>Github Pages</code>，点击<code>Choose a theme</code>选择任意一个主题即可正常访问。</p>
<h2 id="参考文章">参考文章</h2>
<ul>
<li><a href="http://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html">GitHub Actions 入门教程</a></li>
<li><a href="https://cli.vuejs.org/zh/config/#publicpath">Vue CLI配置参考</a></li>
<li><a href="https://docs.github.com/cn/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token">创建个人访问令牌</a></li>
</ul>

    </div>
    
  </div>

        <footer>
        
  <div class="footer">
  
  <div class="theme">
    博客主题为 <a href="https://github.com/xmy6364/CoinRailgun">CoinRailgun</a> 默认主题
  </div>
  <div class="copyright">
    <span>© 2019-2021 xmy6364.</span>
    <span>Powered by <a href="https://github.com/xmy6364/CoinRailgun">CoinRailgun</a></span>
  </div>
</div>

        </footer>
      </main>
    </div>
  </body>
</html>
